<script setup>
import * as echarts from 'echarts'
import { onMounted } from 'vue'
import { ref } from 'vue'

const charts = ref()

onMounted(() => {
  let myCharts = echarts.init(charts.value)

  myCharts.setOption({
    title: {
      // 主标题
      text: '景区排行',
      // 超链接
      link: 'www.baidu.com',
      // 主标题文字样式
      textStyle: {
        color: '#29fcff',
        fontSize: 16
      },
      // 子标题
      subtext: '各大景区排行',
      subtextStyle: {
        color: 'white',
        fontSize: 14
      }
    },
    // x|y轴组件
    xAxis: {
      // 让内容在x轴上均匀分布
      type: 'category'
    },
    yAxis: {
      // 让内容在y轴上均匀分布
      // type: 'category'
    },
    // 布局
    grid: {
      left: 20,
      bottom: 20,
      right: 20
    },
    // 系列：决定显示图表是哪一种
    series: [
      {
        type: 'bar',
        data: [10, 20, 30, 40, 50, 60, 70],
        // 图形上的文本标签
        label: {
          show: true,
          // 文字的位置
          position: 'insideTop'
        },
        // 是否显示背景颜色
        showBackground: true,
        // 背景样式设置
        backgroundStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {offset: 0, color: 'black'},
              {offset: 1, color: 'blue'}
            ]
          },
        },
        // 柱条样式设置
        itemStyle: {
          borderRadius: [10, 10, 0, 0],
          // 柱条颜色,支持函数
          color: function(data) {
            // 函数能获取每一个柱条对象
            let arr = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple']
            return arr[data.dataIndex]
          }
        }
      },
      // 折线图
      {
        type: 'line',
        data: [10, 20, 30, 40, 50, 60, 90],
        smooth: true
      }
    ],
    toolTip: {
      backgroundColor: 'rgba(50, 50, 50, 0.7)'
    }
  })
})
</script>

<template>
  <div class="box6">
    <div class="title">
      <p>热门景区排行</p>
      <img src="../../images/dataScreen-title.png" alt="">
    </div>
    <div class="charts" ref="charts">

    </div>
  </div>
</template>

<style scoped lang="less">
.box6 {
  background: url(../../images/dataScreen-main-rt.png) no-repeat;
  background-size: 100% 100%;
  .title {
    p {
      font-size: 16px;
      margin-bottom: 8px;
    }
  }
  .charts {
    height: 320px;
  }
}
</style>
